<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>发送jsonp请求</button>

    <button class="one">按钮1</button>
    <button class="two">按钮2</button>
    <script>
        var btn = document.querySelector("button");

        var btn1 = document.querySelector(".one");
        var btn2 = document.querySelector(".two");

        btn1.onclick = function () {
            jsonp({
                // 请求地址
                url: 'http://127.0.0.1:3002/one',
                success: function (data) {
                    console.log("按钮1发送的请求：" + data)
                }
            })
        }

        // 都挂在了一个回调函数上，这样我们需要保证回调函数的唯一性
        // 过程我点击了之后html中会生一个script标签，src中就会有url这个网址，
        // http://127.0.0.1:3002/one，这个网址后面就会加上callback=fn fn就是
        // success: function (data) {console.log("按钮2发送的请求：" + data)}就是
        // 这个函数，然后two路由那边响应过来的数据，然后data会收到这个数据，然后
        // 返回给网页上
        btn2.onclick = function () {
            jsonp({
                // 请求地址
                url: 'http://127.0.0.1:3002/two',
                success: function (data) {
                    console.log("按钮2发送的请求：" + data)
                }
            })
        }




        btn.onclick = function () {
            jsonp({
                // 请求地址
                url: 'http://127.0.0.1:3002/jsonp2',
                // url: 'http://127.0.0.1:3002/jsonp',
                data: {
                    name: 'lisi',
                    age: 30
                },
                success: function (data) {

                    console.log(data)
                }
            })
        }


        function jsonp(opt) {
            // jsonp请求就是利用script标签，每发送一个jsonp请求，创建一个script标签
            var script = document.createElement("script");

            // opt.data对象，转化成查询字符串
            var tmp = [];

            for (var key in opt.data) {
                // 把name = lisi放进去，key是name,opt.data[key]是lisi
                tmp.push(`${key}=${opt.data[key]}`)
            }

            // 为每一次jsonp的请求生成一个唯一的函数名
            // toString()转化成字符串，replace(".")把小数点替换为空
            var fn = "fn" + Math.random().toString().replace(".","");
            tmp.push("callback=" + fn);
            var qs = tmp.join("&");

            // 少了"?callback=fn",服务端发过来的就是json数据，不是字符串
            script.src = opt.url + "?" + qs;
            // document.body返回当前文档中的<body>元素
            document.body.appendChild(script);

            // 把data变成一个全局变量
            window[fn] = opt.success;

            // script标签代码执完了会触发onload事件
            script.onload = function () {
                document.body.removeChild(script);

                // 防止内存泄露，内存回收机制才能真正的让script消失
                script.onload = null;
                script = null;

                delete window[fn];

            }
        }
    </script>

    <!-- <script src="http://127.0.0.1:3002/jsonp?name=list"></script> -->
</body>

</html>